<template>
    <canvas id="ice-2_1" width="600" height="300"></canvas>
  </template>
  
  <script setup lang="ts">
//   绘制黄色正方形 
  import { onMounted } from 'vue'
  import {
    createGl,
    createShader,
    createProgram,
    createBuffer
  } from '@/utils';
  
//   const vertexCode = `
//     attribute vec4 a_Position;
    
//     void main () {
//       gl_Position = a_Position;
//     }
//   `
  
//   const fragmentCode = `
//     void main () {
//       gl_FragColor = vec4(1., 1., 0., .9);
//     }
//   `
  const vertexCode = `
    attribute vec4 a_Position;

    void main() {
        gl_Position = a_Position;
    }
  `

  const fragmentCode = `
    void main() {
        gl_FragColor = vec4(1,1,0,.9);
    }
  `
  
  let gl, a_Position, canvas: any
  
  const initGl = () => {
    gl = createGl('#ice-2_1')
  
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexCode)
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentCode)
  
    const program = createProgram(gl, vertexShader, fragmentShader)
  
    // a_Position = gl.getAttribLocation(program, 'a_Position')
    a_Position = gl.getAttribLocation(program,'a_Position')
  
    // const vertices = new Float32Array([
    //   -.17, .33,
    //   -.17, -.33,
    //   .17, .33,
    //   .17, -.33,
    // ])

    // webgl - 范围 在 -1，1之间 啊
    const vertices = new Float32Array([
        -.17,.33,
        -.17,-.33,
        .17,.33,
        .17,-.33
    ])
  
    const buffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)
    // gl.vertexAttribPointer
    // 是 WebGL 中用于指定顶点属性数据的方法之一，
    // 它的作用是告诉 WebGL 如何解析顶点数据数组，并将数据传递给顶点着色器中的 attribute 变量。
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
    gl.enableVertexAttribArray(a_Position)
  
    gl.clearColor(0., 0., 0., .9)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
  }
  
  onMounted(() => {
    initGl()
  })
  </script>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    name: 'Third2_1'
  })
  </script>
  